<template>
	<view class="healthBox">
		<!-- <image class="background" src="@/static/img/headFeature/member/dailyMonitoring/backgroundImage@2x.png"></image>
		<view class="mainContent">
			<navigator v-for="(item,index) in topList" :key="index">
				<image :src="
			                    item.name == '记体重'?'@/static/img/headFeature/member/dailyMonitoring/weight@2x.png':
			                    item.name == '记血压'?'@/static/img/headFeature/member/dailyMonitoring/bloodPressure@2x.png':
			                    item.name == '记血糖'?'@/static/img/headFeature/member/dailyMonitoring/bloodGlucose@2x.png':
			                    item.name == '记尿酸'?'@/static/img/headFeature/member/dailyMonitoring/purineTrione@2x.png':
			                    item.name == '记心率'?'@/static/img/headFeature/member/dailyMonitoring/heartRate@2x.png':
			                    item.name == '记睡眠'?'@/static/img/headFeature/member/dailyMonitoring/sleep@2x.png':
			                    item.name == '记运动'?'@/static/img/headFeature/member/dailyMonitoring/exercise@2x.png':'@/static/img/headFeature/member/dailyMonitoring/diet@2x.png'
			                "
				 alt="">
					<view>{{item.name}}</view>
			</navigator>
		</view> -->
		<view class="dataBoard">
			<view class="monitoringData">
				<view>监测数据板<text class="newest">(最近一次数据)</text></view>
			</view>
			<view class="template">
				<navigator :url=" tzData && tzData.parent ?`/pages/headFeatures/member/recordedData?id=1&userId=${id}` : ''"  class="weight">
					<view class="weight_background">体重值</view>
					<view class="details">
						<view class="data">
							<image src="@/static/img/headFeature/member/dailyMonitoring/dataIcon@2x.png"></image>
							<text>{{tzData.singDate ? tzData.singDate.substr(0,10) : 0}}</text>
						</view>
						<view class="weight_value1">
							<text>{{tzData.weight || 0}}</text>
							<text>KG</text>
						</view>
						<view class="weight_value2">
							<text>{{tzData.weight?(tzData.weight / Math.pow((tzData.height /100),2)).toFixed(2):0}}</text>
							<text>BMI</text>
						</view>
					</view>
				</navigator>
				<navigator :url="xyData && xyData.parent ? `/pages/headFeatures/member/recordedData?id=2&userId=${id}` : ''" class="weight">
					<view class="weight_background bloodPressureValue">血压值</view>
					<view class="details">
						<view class="data">
							<image src="@/static/img/headFeature/member/dailyMonitoring/dataIcon@2x.png"></image>
							<text>{{xyData.singDate ? xyData.singDate.substr(0,10) : 0}}</text>
						</view>
						<view class="weight_value1">
							<text>{{xyData.systolicpressure || 0}}</text>
							<text>mmHg</text>
						</view>
						<view class="weight_value2">
							<text>{{xyData.diastolicpressure || 0}}</text>
							<text>mmHg</text>
						</view>
					</view>
				</navigator>
				<navigator :url="xtData && xtData.parent ? `/pages/headFeatures/member/recordedData?id=3&userId=${id}` : ''" class="weight">
					<view class="weight_background bloodGlucoseValue">血糖值</view>
					<view class="details">
						<view class="data">
							<image src="@/static/img/headFeature/member/dailyMonitoring/dataIcon@2x.png"></image>
							<text>{{xtData.singDate ? xtData.singDate.substr(0,10) : 0}}</text>
						</view>
						<view class="weight_value1">
							<text>{{xtData.bloodtime || 0}}</text>
							<text>{{xtData.bloodmedication || 0}}</text>
						</view>
						<view class="weight_value2">
							<text>{{xtData.bloodglucose || 0}}</text>
							<text>mmol/L</text>
						</view>
					</view>
				</navigator>
			</view>
			<view class="template">
				<navigator :url="xlData && xlData.parent ?`/pages/headFeatures/member/recordedData?id=5&userId=${id}` : ''" class="weight">
					<view class="weight_background heartRateValue">心率值</view>
					<view class="details">
						<view class="data">
							<image src="@/static/img/headFeature/member/dailyMonitoring/dataIcon@2x.png"></image>
							<text>{{xlData.singDate ? xlData.singDate.substr(0,10) : 0}}</text>
						</view>
						<view class="weight_value1">
							<text>{{xlData.toDay || 0}}</text>
							<text>次/分钟</text>
						</view>
						<view class="weight_value2" v-if="typeof(xlData.average) == 'number'">
							<text>7次平均</text>
							<text>{{xlData.average}}</text>
						</view>
						<view class="weight_value2" v-else>
							<text>{{xlData.average ? xlData.average.split('  ')[0] : 0}}</text>
							<text>{{xlData.average ? xlData.average.split('  ')[1] : 0}}</text>
						</view>
					</view>
				</navigator>
				<navigator :url="smData && smData.parent ?`/pages/headFeatures/member/recordedData?id=6&userId=${id}` : ''" class="weight">
					<view class="weight_background sleepValue">睡眠值</view>
					<view class="details">
						<view class="data">
							<image src="@/static/img/headFeature/member/dailyMonitoring/dataIcon@2x.png"></image>
							<text>{{smData.singDate ? smData.singDate.substr(0,10) : 0}}</text>
						</view>
						<view class="weight_value1">
							<text>{{smData.toDay ? smData.toDay.split(' ')[0] : 0}}</text>
							<text>{{smData.toDay ? smData.toDay.split(' ')[1] : 0}}</text>
						</view>
						<view class="weight_value2">
							<text>{{smData.average ? smData.average.split(' ')[0] : 0}}</text>
							<text>{{smData.average ? smData.average.split(' ')[1] : 0}}</text>
						</view>
					</view>
				</navigator>
				<navigator :url="nsData && nsData.parent ?`/pages/headFeatures/member/recordedData?id=4&userId=${id}` : ''" class="weight">
					<view class="weight_background purineTrioneValue">尿酸值</view>
					<view class="details">
						<view class="data">
							<image src="@/static/img/headFeature/member/dailyMonitoring/dataIcon@2x.png"></image>
							<text>{{nsData.singDate ? nsData.singDate.substr(0,10) : 0}}</text>
						</view>
						<view class="weight_value1">
							<text>{{nsData.toDay || 0}}</text>
							<text>μmol/L</text>
						</view>
						<view class="weight_value2" v-if="typeof(nsData.average) == 'number'">
							<text>7次平均</text>
							<text>{{nsData.average}}</text>
						</view>
						<view class="weight_value2" v-else>
							<text>{{nsData.average ? nsData.average.split('  ')[0] : 0}}</text>
							<text>{{nsData.average ? toDecimal2(nsData.average.split('  ')[1]) : 0}}</text>
						</view>
					</view>
				</navigator>
			</view>
			<view class="template">
				<navigator :url="ydData && ydData.parent ? `/pages/headFeatures/member/recordedData?id=7&userId=${id}` : ''" class="weight">
					<view class="weight_background bloodPressureValue">运动值</view>
					<view class="details">
						<view class="data">
							<image src="@/static/img/headFeature/member/dailyMonitoring/dataIcon@2x.png"></image>
							<text>{{ydData.singDate ? ydData.singDate.substr(0,10) : 0}}</text>
						</view>
						<view class="weight_value1">
							<view>{{ydData.motionTime || 0}}</view>
						</view>
						<view class="weight_value2">
							<view>{{ydData.motiontype || 0}}</view>
						</view>
					</view>
				</navigator>
				<navigator :url="ysData ?'/pages/headFeatures/member/dietList?userId='+id : ''" class="weight">
					<view class="weight_background">饮食值</view>
					<view class="details">
						<view class="data">
							<image src="@/static/img/headFeature/member/dailyMonitoring/dataIcon@2x.png"></image>
							<text>{{ysData.createdDate || ''}}</text>
						</view>
						<view class="weight_value1">
							<view>{{ysData.value || 0}}</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUrlParam,filterData2
	} from '@/static/js/filter.js';
	export default {
		data() {
			return {
				topList: [],
				tzData: {},
				xyData: {},
				xtData: {},
				xlData: {},
				smData: {},
				nsData: {},
				ydData: {},
				ysData: {},
				id: ''
			}
		},
		onLoad() {
			this.id = getUrlParam('userId')
			this.$api.userMonitorList(this.id).then((res) => {
				this.topList = res.data.result && res.data.result.AppMonitorEntity;
				if(res.data.result.appMonitorValueEntities && res.data.result.appMonitorValueEntities.length > 0) {
					res.data.result.appMonitorValueEntities && res.data.result.appMonitorValueEntities.map((a) => {
						a.parameterValues = JSON.parse(a.parameterValues) || []
						if (a.parent == 1) {
							a.parameterValues.map((b) => {
								if (b.name == '身高') {
									a.height = b.value
								} else if (b.name == '体重') {
									a.weight = b.value
								}
							})
							this.tzData = a
						} else if (a.parent == 2) {
							a.parameterValues.map((b) => {
								if (b.name == '收缩压') {
									a.systolicpressure = b.value
								} else if (b.name == '舒张压') {
									a.diastolicpressure = b.value
								}
							})
							this.xyData = a
						} else if (a.parent == 3) {
							a.parameterValues.map((b) => {
								if (b.name == '血糖值') {
									a.bloodglucose = b.value
								} else if (b.name == '记录时间') {
									a.bloodtime = b.value
								} else if (b.name == '用药情况') {
									a.bloodmedication = b.value
								}
							})
							this.xtData = a
						} else if (a.parent == 5) {
							this.xlData = a
						} else if (a.parent == 6) {
							this.smData = a
						} else if (a.parent == 4) {
							this.nsData = a
						} else if(a.parent == 7) {
                                a.parameterValues.map((b)=>{
                                    if(b.name == '运动类型'){
                                        a.motiontype = b.value
                                    }else if(b.name == '运动时间'){
                                        a.motionTime = b.value
                                    }
                                })
                                this.ydData = a
                        }else if(a.parent == 8) {
                            a.parameterValues.createdDate = a.createdDate;
                            a.parameterValues.parent = a.parent;
                            this.ysData = a.parameterValues
                        }
					})
				}

			})
		},
		methods:{
			toDecimal2(x) {
				var f = parseFloat(x);  
				if (isNaN(f)) {  
					return false;  
				}  
				var f = Math.round(x*100)/100;  
				var s = f.toString();  
				var rs = s.indexOf('.');  
				if (rs < 0) {  
					rs = s.length;  
					s += '.';  
				}  
				while (s.length <= rs + 2) {  
					s += '0';  
				}  
				return s;  
			}
		}
	}
</script>

<style lang="scss" scoped>
	.healthBox {
		min-width: 100vw;
		min-height: 100vh;
		background: #F8F8F8;
		overflow: hidden;

		.background {
			height: 390upx;
			width: 750upx;
		}

		.mainContent {
			position: relative;
			width: 702upx;
			margin: -256upx 24upx 0;
			background-color: #fff;
			border-radius: 12upx;
			padding: 46upx 30upx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;

			navigator {
				width: 25%;
				text-align: center;

				image {
					width: 110upx;
					height: 110upx;
				}

				view {
					color: #333333;
					font-size: 28upx;
				}
			}

			navigator:nth-child(-n+4) {
				margin-bottom: 50upx;
			}

		}

		.dataBoard {
			width: 702upx;
			margin: 0 24upx;

			.monitoringData {
				margin-top: 41upx;
				text-align: center;

				view {
					color: #333333;
					font-size: 32upx;

					.newest {
						color: #666666;
						font-size: 26upx;
					}

					.compile {
						color: #145BD1;
						font-size: 26upx;
						margin-left: 100upx;
					}
				}
			}
		}

		.template {
			margin-top: 41upx;
			display: flex;
			align-items: center;

			.weight {
				    width: 31%;
				    margin-right: 3%;

				.weight_background {
					background: url(@/static/img/headFeature/member/dailyMonitoring/weightValue@2x.png) no-repeat;
					width: 100%;
					height: 87upx;
					color: #fff;
					text-align: center;
					color: 30upx;
					line-height: 87upx;
					background-size: 100% 100%;
					font-weight: bold;
				}

				.bloodPressureValue {
					background: url(@/static/img/headFeature/member/dailyMonitoring/bloodPressureValue@2x.png);
					background-size: 100% 100%;
				}

				.bloodGlucoseValue {
					background: url(@/static/img/headFeature/member/dailyMonitoring/bloodGlucoseValue@2x.png);
					background-size: 100% 100%;
				}

				.heartRateValue {
					background: url(@/static/img/headFeature/member/dailyMonitoring/heartRateValue@2x.png);
					background-size: 100% 100%;
				}

				.sleepValue {
					background: url(@/static/img/headFeature/member/dailyMonitoring/sleepValue@2x.png);
					background-size: 100% 100%;
				}

				.purineTrioneValue {
					background: url(@/static/img/headFeature/member/dailyMonitoring/purineTrioneValue@2x.png);
					background-size: 100% 100%;
				}

				.details {
					background-color: #fff;
					padding: 28upx 15upx 34upx;
					box-sizing: border-box;
					width: 100%;
					box-shadow: 0px 1px 4px 2px #EDEDED;
					height: 208upx;
					.data {
						image {
							width: 24upx;
							height: 24upx;
						}

						text {
							color: #36AC7D;
							font-size: 24upx;
						}
					}

					view {
						color: #333333;
						font-size: 24upx;
						font-weight: 500;
						overflow: hidden;

						text:first-child {
							float: left;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
							width: 51%;
						}

						text:last-child {
							float: right;
						}
					}

					.weight_value1 {
						margin: 30upx 0 20upx;
					}
				}
			}

			.weight:last-child {
				margin-right: 0;
			}
		}

		.template:last-child {
			margin-bottom: 50upx;
		}
	}
	
</style>
